<template>
  <div class="history_main">
    <van-pull-refresh v-model="isLoading"
                      :loading-text="$t('fresh.loading')"
                      :loosing-text="$t('fresh.loosing')"
                      :pulling-text="$t('fresh.pulling')"
                      :success-text="$t('fresh.success')"
                      style="flex:1; overflow:auto" @refresh="()=>getData(true)">
      <van-list
              v-model:loading="loading"
              :finished="finished"
              :error-text="$t('fresh.error')"
              :loading-text="$t('fresh.loading')"
              :finished-text="$t('fresh.noMore')"
              :immediate-check="false"
              @load="getData"
              :offset="10">
        <div class="history_list" v-for="item in items" :key="item.id">
          <div class="_main_1"><div>{{$t("status")}}</div><div>{{item.status === 0? $t('deposit.syncing'):  $t('deposit.success')}}</div></div>
          <div class="_main_line"></div>
          <div class="_main_1"><div>{{$t("deposit.amount")}}</div><div>{{item.amount}}{{item.coinId === 1? "USDT": "KOS"}}</div></div>
          <div class="_main_line"></div>
          <div class="_main_2"><div>{{$t("deposit.hash")}}</div><div>{{item.hash}}</div></div>
          <div class="_main_line"></div>
          <div class="_main_2"><div>{{$t("deposit.address")}}</div><div>{{item.address}}</div></div>
        </div>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
  import http from "../../http";

  export default {
    data() {
      return {
        page: 1,
        count: 0,
        finished: false,
        isLoading: false,
        items: [],
        loading: true,
      }
    },
    mounted() {
      this.getData(true);
    },
    methods: {
      async getData(isRefresh) {
        if (isRefresh) {
          this.page = 1;
        } else {
          this.page++;
        }
        let res = await http.get(`/api/coin-log/list?type=0&pageSize=10&currentPage=${this.page}`);
        if (res.code === 200) {
          this.items = isRefresh ? res.data.records : this.items.concat(res.data.records);
          this.count = res.data.total;
          if(isRefresh) this.finished = false;
          if (this.items.length === this.count) {
            this.finished = true;
          }
        }
        this.loading = false;
        this.isLoading = false;
      }
    }
  }

</script>

<style scoped lang="scss">
  .history_main {
    height: calc(100vh - 45px);
    background-color:#333;
    display: flex;
    flex-direction: column;
  }
  .history_list {
    margin: 0px 10px 10px 10px;
    border-radius: 10px;
    /*height: 367px;*/
    background-color: #2C1A0F;
    margin-top: 10px;
    padding: 15px;
    text-align: left;
  }
  ._title {
    font-size: 15px;
    font-family: PingFangTC-Medium, PingFangTC;
    font-weight: 500;
    color: $color;
    margin-bottom: 11px;
  }
  ._main_1 {
    @include flex;
    margin-top: 10px;
    >div {
      &:nth-child(1) {
        font-size: 14px;
        font-family: PingFangTC-Medium, PingFangTC;
        font-weight: 500;
        color: #ccc;
      }
      &:nth-child(2) {
        font-size: 14px;
        font-family: PingFangTC-Medium, PingFangTC;
        font-weight: 500;
        color: #D8BC84;
      }
    }
  }
  ._main_line {
    /*background-color: #868686;*/
    border-top: 1px solid #868686;
    margin-top: 10px;
  }
  ._main_2 {
    @include flex;
    margin-top: 10px;
    >div {
      &:nth-child(1) {
        font-size: 14px;
        font-family: PingFangTC-Medium, PingFangTC;
        font-weight: 500;
        color: #ccc;
      }
      &:nth-child(2) {
        font-size: 14px;
        font-family: PingFangTC-Medium, PingFangTC;
        font-weight: 500;
        color: #D8BC84;
        width: 256px;
        overflow:hidden;
        word-wrap:break-word;
        word-break:break-all;

      }
    }

  }
  ._main_3 {
    @include flex;
    margin-top: 15px;
    >div {
      &:nth-child(1) {
        font-size: 14px;
        font-family: PingFangTC-Medium, PingFangTC;
        font-weight: 500;
        color: #ccc;
      }
      &:nth-child(2) {
        width: 70px;
        height: 28px;
        background: $color3;
        border-radius: 14px;
        font-size: 13px;
        font-family: PingFangTC-Medium, PingFangTC;
        font-weight: 500;
        color: #fff;
        line-height: 28px;
        text-align: center;
        cursor: pointer;
      }
    }
  }
</style>
